<template>
    <div class="box">
        <h1>组件间通信9: vuex</h1>
        <Child1 />
        <Child2 />
        <Child3 />
    </div>
</template>

<script>
// vuex
// 场景:
//      大型项目比较和用vuex ---> 当多个组件依赖同一个数据的时候,此时使用vuex比较合适
//      相关面试题:
//      什么数据会放在vuex? 举例说明?
//      最典型的就是用户信息
// 使用步骤:
//      1. 安装
//          npm i vuex@3
//      2. 引入使用
//          import Vuex from 'Vuex'
//          import Vue from 'vue'
//          Vue.use(Vuex)
//      3. 创建并暴露store
//          export default new Vuex.Store({
//              state: {},
//              mutations: {},
//              actions: {},
//              getters: {}
//          })
//      4. 在创建vm实例的时候进行关联
//          const vm = new Vue({
//              ......
//              store,
//          })
// 接下来页面中就可以使用vuex了
// 不使用模块化: 就正常写就行
// 使用模块化: 只有state被单独分成了小的数据仓库
// 使用命名空间: state和模块化的state是一样的,mutations、actions、getters 也独立成了小的模块
import Child1 from './Child1.vue' // 不使用模块化
import Child2 from './Child2.vue' // 使用模块化
import Child3 from './Child3.vue' // 使用命名空间
export default {
    name: 'VuexTest',
    components: {
        Child1,
        Child2,
        Child3,
    }
}
</script>

<style scoped>
</style>
